import React, { useEffect, useRef, useState, useContext } from 'react';
import { Input, Message, Form, Radio, Button, Row, Col, Select } from 'antd';
import CryptoJS from 'crypto-js';
import styles from './style.module.scss';

import Drawer from 'components/Drawer';

import { HomeContext } from './../context';

const formItemLayout = {
    labelCol: {
        md: { span: 4 },
        sm: { span: 4 },
        xs: { span: 24 },
    },
    wrapperCol: {
        md: { span: 20 }, // 屏幕 ≥ 768px
        sm: { span: 20 }, // 屏幕 ≥ 576px
        xs: { span: 24 }, // 屏幕 < 576px
    },
};
const tailLayout = {
    wrapperCol: {
        md: { offset: 4, span: 20 },
        sm: { offset: 4, span: 20 },
        xs: { offset: 0, span: 24 },
    },
};

// 账户编辑
const ViewPass = (props) => {
    const { record, viewPassVisible, viewPassHandleCancel, labels } = useContext(HomeContext);

    const formInstance = useRef();
    const [loading, setLoading] = useState(false);
    const [decodePassword, setDecodePassword] = useState('');
    const initialValues = record || {};

    // 点击确定
    function handleSubmit(value) {
        if (loading) return;
        let { password, secretKey } = value;

        let plaintext = CryptoJS.AES.decrypt(password, secretKey).toString(CryptoJS.enc.Utf8);
        if (plaintext) {
            setDecodePassword(plaintext);
        } else {
            Message.error('解密失败')
        }
    };
    // 关闭弹窗
    function close() {
        viewPassHandleCancel()
    }
    useEffect(() => {
        return () => {
            setDecodePassword('')
        }
    }, [viewPassVisible])
    return (
        <Drawer
            visible={viewPassVisible}
            title={'查看密码'}
            onClose={close}
        >
            <div className={styles.container}>
                <div className={styles.formContent}>
                    <Form
                        {...formItemLayout}
                        initialValues={initialValues}
                        onFinish={handleSubmit}
                        ref={formInstance}
                    >
                        <Form.Item
                            label={'密码'}
                            name="password"
                            extra="请在下方输入加密密钥解密, 即可查看密码原文"
                        >
                            <>
                                {initialValues.password}
                                <Input hidden />
                            </>
                        </Form.Item>
                        <Form.Item
                            label={'加密密钥'}
                            name="secretKey"
                            rules={[
                                { required: true, message: '请输入' },
                                { pattern: /^\d{6}$/, message: '请输入六位数字密钥' }
                            ]}
                            extra="请输入六位数字的加密密钥"
                        >
                            <Input.Password
                                className={styles.inputStyle}
                                placeholder="请输入密码"
                            />
                        </Form.Item>
                        <Form.Item
                            label={'密码原文'}
                            hidden={!decodePassword}
                        >
                            {decodePassword}
                        </Form.Item>
                        <Form.Item {...tailLayout}>
                            <Button htmlType="submit" type="primary" loading={loading} disabled={loading} className={styles.inputStyle2}>确定</Button>
                            <span className={styles.splitBlock}></span>
                            <Button loading={loading} disabled={loading} className={styles.inputStyle2} onClick={close}>取消</Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </Drawer >
    )
}

ViewPass.defaultProps = {
    onCancel: () => { },
    onOk: () => { },
}


export default ViewPass;